{% extends "baseadmin.html" %}

{% block title %}字体资源管理{% endblock %}

{% block style %}
<style>
    .cardmw {
        min-width: 120;
    }
</style>
{% endblock %}

{% block maincontent %}
<div class="container">
    <form action="{{ url_for('fontact.viewfonts') }}" class="form-control mb-2" method="post">
        <div class="row">
            <div class="col-3">
                <label for="miniodir" class="form-control">输入Minio的字体目录: {{ miniodir }}</label>
            </div>
            <div class="col-9">
                <div class="input-group">
                    <select name="miniodir" id="miniodir" class="form-control" style="width: 200px;">
                        <option value="fonts/freebussfont/">免费商用字体</option>
                        <option value="fonts/chinafont/">古风特效字体</option>
                        <option value="fonts/zhaozhigongfang/">造字工坊字体</option>
                        <option value="fonts/fangzheng/">109种方正稀有字体</option>
                        <option value="fonts/jingxuanzhongwen/">精选中文字体</option>
                        <option value="fonts/wzypsfont/">wzy字体资源</option>
                        <option value="fonts/字体合集/Aa祝你我明媚向春天/">Aa祝你我明媚向春天</option>
                        <option value="fonts/字体合集/免费商用字体合集/思源免费商用字体/">思源免费商用字体</option>
                        <option value="fonts/字体合集/免费商用字体合集/站酷免费商用字体/">站酷免费商用字体</option>
                        <option value="fonts/字体合集/免费商用字体合集/阿里授权华康字体/">阿里授权华康字体</option>
                        <option value="fonts/字体合集/土波利-古风字体升级版/">土波利-古风字体升级版</option>
                        <option value="fonts/字体合集/珍藏稀有字体300款/57款古风字体/57款古风字体/">57款古风字体</option>
                        <option value="fonts/字体合集/珍藏稀有字体300款/95款哥特式英文字体/">95款哥特式英文字体</option>
                        <option value="fonts/字体合集/珍藏稀有字体300款/精选中文字体/">精选中文字体</option>
                        <option value="fonts/字体合集/阿里妈妈字体/">阿里妈妈字体</option>
                    </select>
                    <button type="submit" class="btn btn-outline-secondary">提交</button>
                </div>
            </div>
        </div>
        
    </form>

    <div class="row">
        <!-- 字体列表 -->
        <div class="d-flex flex-wrap gap-3 mt-3">
            <!-- 使用jinja 模板语法，循环card  -->
            {% for font in fonts %}
            <div class="card flex-fill cardmw">
                <div class="card-header">
                    {{ font.srcfile }}  | 
                    <button class="btn btn-light preview-btn" data-font-name="{{ font.encodename }}" t-custfont="{{ font.refname }}">预览</button>
                    <div class="spinner-border spinner-border-sm ms-auto" style="display: none;" role="status" aria-hidden="true"></div>
                </div>
                <div class="card-body {{ font.refname }}">
                    <h3 class="card-title">{{ font.srcfile }} ({{ font.size }} M)</h3>
                    <p class="card-text">世界那么大，我想去看看！123....Go World!</p>
                    <p class="card-text" id="preview"></p>
                </div>
                <div class="card-footer align-content-end">
                    <button class="btn btn-light down-btn" data-font-name="{{ font.encodename }}" t-custfont="{{ font.refname }}">下载</button> | 
                    <button class="btn btn-light cp-url-btn" data-font-name="{{ font.encodename }}" t-custfont="{{ font.refname }}">复制URL</button>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

<!-- 引入fontact.js -->
<script src="https://minio.51epub.com/static/js/localcache/fontact.js"></script>

<script>
    // 设置全局变量
    setFontbase('{{ mcdata.url_bucket }}{{ miniodir }}', 'font_');

    async function setfontcss(fontrefname, classname) {
        const fontUrl = await getfont(fontrefname);
        const fontName = fontrefname.split('.')[0];
        const fonttype = fontrefname.split('.')[1].toLowerCase();
        let cssformat = 'truetype';
        if (fonttype == 'ttf') {
            cssformat = 'truetype';
        } else if (fonttype == 'woff') {
            cssformat = 'woff';
        } else if (fonttype == 'woff2') {
            cssformat = 'woff2';
        } else if (fonttype == 'otf') {
            cssformat = 'opentype';
        }

        let styleElement = document.getElementById('custfont');
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = 'custfont';
            document.head.appendChild(styleElement);
        }
        var src_inner = styleElement.innerHTML; // 获取原有的样式
        var _stylestr = `
            @font-face {
                font-family: '${fontName}';
                src: url('${fontUrl}') format('${cssformat}');
            }
            .${classname} {
                font-family: '${fontName}';
            }
        `;

        if (src_inner.indexOf(fontName) <0) {
            styleElement.innerHTML += _stylestr;
        }

    }

    // 点击预览按钮，显示
    var previewButtons = document.querySelectorAll('.preview-btn');
    previewButtons.forEach(function(button) {
        // 预加载字体，如果本地缓存已经存在对应的字体文件，则预先设置字体样式
        var fontName = button.getAttribute('data-font-name');
        var fontClass = button.getAttribute('t-custfont');
        cacheisfont(fontName).then(function(isfont) {
            if (isfont) {
                setfontcss(fontName, fontClass);
            }
        });

        button.addEventListener('click', async function() {
            var fontName = this.getAttribute('data-font-name');
            var fontClass = this.getAttribute('t-custfont');

            // getfont(fontName).then(function() {
            //     setfontcss(fontName, fontClass);
            // });

            // 获取button的的并行下一个兄弟元素，即加载状态的spinner
            var spinner = this.nextElementSibling;
            spinner.style.display = 'block';

            try {
                await getfont(fontName);
                setfontcss(fontName, fontClass);
                // 显示完成状态，隐藏加载状态
                spinner.style.display = 'none';
            } finally {
                // 显示完成状态，隐藏加载状态
                spinner.style.display = 'none';
            }

        });
    });

    // 点击下载按钮，下载
    var downButtons = document.querySelectorAll('.down-btn');
    downButtons.forEach(function(button) {
        button.addEventListener('click', async function() {
            var fontName = this.getAttribute('data-font-name');
            var fontUrl = ossurl+fontName;
            var a = document.createElement('a');
            a.href = fontUrl;
            a.download = fontName;
            a.click();
        });
    });

    // 点击复制URL按钮，复制URL
    var cpurlButtons = document.querySelectorAll('.cp-url-btn');
    cpurlButtons.forEach(function(button) {
        button.addEventListener('click', async function() {
            var fontName = this.getAttribute('data-font-name');
            var fontUrl = ossurl+fontName;
            var input = document.createElement('input');
            input.value = fontUrl;
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            document.body.removeChild(input);
            alert('URL已经复制到剪贴板');
        });
    });

</script>

{% endblock %}